<template>
  <div>
    <h2>{{title}}</h2>

    <k-form :model="ruleForm" :rules="rules" ref="loginForm2">
      <k-form-item label="用户名" prop="name">
        <k-input v-model="ruleForm.name"></k-input>
      </k-form-item>

      <k-form-item label="密码" prop="pwd">
        <k-input v-model="ruleForm.pwd" type="password"></k-input>
      </k-form-item>

      <k-form-item>
        <!-- .native.prevent 原生去阻止默认提交 -->
        <k-input type="submit" @click.native.prevent="submitForm2()">登录</k-input>
      </k-form-item>
    </k-form>
    <p>{{ruleForm}}</p>
  </div>
</template>

<script>
import KInput from "./Input.vue";
import KFormItem from "./FormItem.vue";
import KForm from "./Form.vue";

export default {
  name: "formWrap",
  props: {
    title: {
      type: String,
      default: "AI"
    }
  },
  components: {
    KInput,
    KFormItem,
    KForm
  },
  data() {
    return {
      ruleForm: {
        name: "",
        pwd: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入名称" },
          { min: 4, max: 10, message: "请输入4~10位的用户名" }
        ],
        pwd: [
          { required: true, message: "请输入密码" },
          { min: 6, max: 10, message: "请输入6~10位的密码" }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      return false;
    },
    submitForm2() {
      //拿到当前表单，
      this.$refs.loginForm2.validate(valid => {
        if (valid) {
          alert("提交登录");
        } else {
          console.log("校验失败");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
</style>
